<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.show {
				display: block;
			}
			.hide {
				display: none;
			}
			.bold {
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="aaa">
			价格： {{priceshow}}
			<hr />
			{{fullname}}
			<input v-model="firstname" />
			<input v-model="lastname" />
			
			<button @click="abc">切换</button>
			<!-- class="bold show" class="bold hide"  -->
			<div :class="{bold:true, show: isshow, hide: !isshow}"> 
				hello
			</div>
		</div>
		<script>
			var vue = new Vue({
				el: '#aaa',
				data: {
					isshow: false,
					firstname: 'tom',
					lastname: 'corus',
					fullname: 'tom corus',
					price: 1001234565.12345678
				},
				methods:{
					abc() {
						this.isshow = !this.isshow
					}
				}
				,
				watch:{
					firstname(newv){
						this.price = this.price + 100;
						this.fullname = newv + this.lastname
					},
					lastname(newv) {
						this.fullname = this.firstname + newv
					}
				}
				,
				computed:{
					priceshow() {
						return '$' + dealNumberToMoney(Math.ceil(this.price * 100)/100  + '')
					}
				}
			})
			
			
			function dealNumberToMoney(money){
			    var fmtAmt = "";
			    if(money&&money!=null){
			        money = money.replace(/,/g,"").replace(/，/g,"");
			        if(money.indexOf(".")==-1){
			            money = money + ".00";
			        }
			        
			        var index = money.indexOf(".");
			        var floatValue = money.substring(index+1);
			        
			        var count = 0;
			        for(var i=(index);i>=0;i--){
			            fmtAmt = money[i]+fmtAmt;
			            if(count==3&&i!=0){
			                fmtAmt = "," + fmtAmt;
			                count = 0;
			            }
			            count++;
			        }
			    }
			    
			    fmtAmt += floatValue;
			    
			       return fmtAmt;
			}
		</script>
		
		
	</body>
</html>
